<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 显示省 -->
    <select id="province">
        <option>选择省份</option>

    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市</option>
    </select>
    <!-- 显示区 -->
    <select id="area">
        <option>选择区</option>
    </select>
    <script>
        var data = [{
            name: "湖北省",
            citys: [{
                name: "武汉市",
                area: ["汉阳区", "武昌区", "青山区", "洪山区", "东西湖区", "汉南区", "蔡甸区", "江夏区"]
            },
            {
                name: "荆门市",
                area: ["东宝区", "掇刀区", "钟祥市", "沙洋县", "沙洋镇", "京山县"]
            },
            {
                name: "恩施州",
                area: ["恩施市", "利川市", "建始县", "业州镇", "巴东县"]
            }]
        },{
            name: "广东省",
            citys: [{
                name: "深圳市",
                area: ["福田区", "罗湖区", "南山区", "宝安区"]
            },
            {
                name: "佛山市",
                area: ["禅城区", "南海区", "顺德区", "三水区"]
            }
            ]
        },
        {
            name: "山东省",
            citys: [
                {
                    name: "临沂市",
                    area: ["兰山区", "罗庄区", "河东区"]
                },
                {
                    name: "烟台市",
                    area: ["莱阳市", "莱州市", "蓬莱市"]
                },
                {
                    name: "日照市",
                    area: ["东港区", "岚山区", "五莲县"]
                }
            ]
        },
        {
            name: "浙江省",
            citys: [
                {
                    name: "杭州市",
                    area: ["余杭区", "萧山区", "临安市", "富阳市", "建德市"]
                },
                {
                    name: "温州市",
                    area: ["鹿城区", "龙湾区", "瓯海区", "瑞安市", "乐清市"]
                },
                {
                    name: "金华市",
                    area: ["永康市", "义乌市", "东阳市", "武义县"]
                }
            ]
        }];


        var provinceDom = document.querySelector("#province")
        var cityDom = document.querySelector("#city")
        var areaDom = document.querySelector("#area")

        var provinceHtml = `<option value="-1">选择省份</option>`
        data.forEach(function (item, index) {
            provinceHtml += `<option value="${index}">${item.name}</option>`
        })
        provinceDom.innerHTML = provinceHtml;

        provinceDom.onchange = function () {
            var html = `<option value="0">选择市</option>`
            areaDom.innerHTML = `<option>选择区</option>`
            var index = this.value;
            if (index != -1) {
                data[index].citys.forEach(function (item, i) {
                    html += `<option value="${index},${i}">${item.name}</option>`
                })
            }
            cityDom.innerHTML = html;
        }
        cityDom.onchange = function () {
            var html = `<option>选择区</option>`
            if (this.value != 0) {
                var info = this.value.split(','); //[省份下标,城市下标]
                data[info[0]].citys[info[1]].area.forEach(function (item) {
                    html += `<option>${item}</option>`;
                })
            }
            areaDom.innerHTML = html;
        }

    </script>
</body>

</html>